 <template>
    <div class="header">
        <div class="content-wrapper">
            <div class="avatar">
                <img width="64" height="64" :src="seller.avatar">
            </div>
            <div class="content">
                <div class="title">
                    <span class="brand"></span>
                    <span class="name">{{ seller.name }}</span>
                </div>
                <div class="description">
                    {{ seller.description }}/{{ seller.deliveryTime }}分钟送达
                </div>
                <div class="supports" v-if="seller.supports">
                    <span class="icon" :class="this.classMay[seller.supports[0].type]"></span>
                    <span class="text">{{seller.supports[0].description}}</span>
                </div>
            </div>
            <div @click="showDetail" v-if="seller.supports" class="support-count">
            	<span class="count">
            		{{seller.supports.length}}个
            	</span>
            	<i class="icon-keyboard_arrow_right"></i>
            </div>
        </div>
        <div class="bulletin-wrapper" @click="showDetail">
        	<span class="bulletin-title"></span><span class="bulletin-text">{{seller.bulletin}}</span>
        	<i class="icon-keyboard_arrow_right"></i>
        </div> 
         <div class="background">
        	<img :src="seller.avatar" width="100%" height="100%"/>
        </div>
        <div class="detail"  v-show="detailShow">
        	<div class="detail-wrapper">
        		<div class="detail-main">
        			<h1 class="name">{{seller.name}}</h1>
        			<star :size='48' :score="4.2"></star>
        			<div class="detail-reduce">
        				<span></span>
        				<h1 class="reduce-infor">优惠信息</h1>
        				<span></span>
        			</div>
        			<div class="detail-infor">
        				<p class="list-infor" v-for="(item,index) in seller.supports"><span class="icon" :class="classMayList[index]"></span>{{item.description}}</p>
        			</div>
        			<div class="detail-reduce">
        				<span></span>
        				<h1 class="reduce-infor">商家公告</h1>
        				<span></span>
        			</div>
        			<div class="seller-notice">
        				{{seller.bulletin}}
        			</div>
        		</div>
        	</div>
        	<div class="detail-close">
        		<i class="icon-close" @click="closeDetail"></i>
        	</div>
        </div>
    </div>
 </template>
 <script>
 import star from '../star/star.vue';
    export default{
    	components: {
			star:star
			
		},
        props: ['seller'],
        data() {
         return {
			detailShow: false,
			classMayList:['decrease', 'discount', 'special', 'invoice', 'guarantee']
         }
        },
        methods: {
          showDetail() {
          	this.detailShow = true;
          },
          closeDetail() {
          	this.detailShow = false;
          }
        },
        mounted() {
            this.classMay = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
        }
		
    }
        
 </script>
 <style lang="scss">  
 @import "../../common/styles/mixin.scss";
    .header{
        color: #fff;
        position:relative;
        overflow:hidden;
        background:rgba(7,17,27,0.5);
        .content-wrapper{
            padding: 24px 12px 18px 24px;
            font-size: 0px;
            position:relative;
            .avatar{
                display: inline-block;
                vertical-align:top;
                img{
                      border-radius:2px;
                 }
            }
            .content{
                 display: inline-block;
                 margin-left: 16px;
                 font-size: 14px;
                 .title{
                     margin: 2px 0px 8px 0px;
                     .brand{
                         display: inline-block;
                         width: 30px;
                         height: 18px;
                         @include bg-image('brand');
                         background-size: 30px 18px;
                         background-repeat: no-repeat;
                     }
                     .name{
                         font-size:16px;
                        margin-left: 6px;
                         line-height: 18px;
                         font-weight: bold;
                         display: inline-block;
                         vertical-align: top; 
                     }
                 }
                 .description{
                 	margin-bottom: 10px;
                 	line-height: 12px;
                 	font-size: 12px;
                 }
                 .supports{
                 	.icon{
                 		vertical-align: top;
                 		display: inline-block;
                 		width: 12px;
                 		height: 12px;
                 		margin-right: 10px;
                 		background-size:12px 12px;
                 		background-repeat:no-repeat;
                 		
                 	}
                    .decrease{
                        @include bg-image('decrease_1');
                    }
                    .discount{
                        @include bg-image('discount_1');
                    }
                    .guarantee{
                        @include bg-image('guarantee_1');
                    }
                    .invoice{
                        @include bg-image('invoice_1');
                    }
                    .special{
                        @include bg-image('special_1');
                    }
                    .text{
                 		vertical-align: top;
                    	line-height: 12px;
                        font-size: 10px;
                    }
                 }
            }
            .support-count{
            	position: absolute;
            	right: 12px;
            	bottom: 14px;
            	padding: 0 8px;
            	height: 24px;
            	line-height: 24px;
            	border-radius: 14px;
            	background:rgba(0,0,0,0.2) ;
            	.count{
            		vertical-align: top;
            		font-size: 10px;
            	}
            	.icon-keyboard_arrow_right{
            		margin-left: 2px;
            		vertical-align: top;
            		font-size: 10px;
            		line-height: 24px;
            	}
            }
        }
        .bulletin-wrapper{
        	height: 28px;
        	line-height: 28px;
        	padding: 0px 22px 0px 12px;
        	white-space: nowrap;
        	overflow: hidden;
        	text-overflow: ellipsis;
        	position: relative;
        	background: rgba(7,17,27,0.2);
        	.bulletin-title{
        		vertical-align: top;
        		display: inline-block;
        		width: 22px;
        		height: 12px;
        		margin-top: 8px;
        		@include bg-image('bulletin');
        		background-size: 22px 12px;
        		background-repeat: no-repeat;
        	}
        	.bulletin-text{
        		vertical-align: top;
        		font-size: 10px;
        		margin:0px 4px;
        	}
        	.icon-keyboard_arrow_right{
        		position: absolute;
        		margin-left: 2px;
        		font-size: 10px;
        		right: 12px;
        		top: 8px;
        	}
        }
        .background{
        	position: absolute;
        	top: 0px;
        	left: 0px;
        	width: 100%;
        	height: 100%;
        	z-index: -1;
        	filter:blur(10px);
        }
        .detail{
        	position: fixed;
        	z-index: 100;
        	width: 100%;
        	height: 100%;
        	overflow: auto;
        	background: rgba(7,17,27,0.8);
        	top: 0px;
        	left: 0px;
        	.detail-wrapper{
        		width:100%;
        		min-height: 100%;
        		overflow:hidden;
        		.detail-main{
        			margin-top: 64px;
        			padding-bottom: 64px;
        			padding: 0px 36px;
        			overflow: hidden;
        			.name{
        				line-height: 16px;
        				text-align: center;
        				font-size: 16px;
        				font-weight: 700;
        			}
        			.star{
        				margin-top: 16px;
        				span {
							margin-right:21px;
        				}
        			}
        			.detail-reduce{
        				margin: 35px 0px 31px 0px;
        				position: relative;
        				overflow: hidden;
        				h1 {
        					width: 24%;
        					float: left;
        					padding: 0px 2%;
        					display: inline-block;
        					text-align: center;
        					font-size: 14px;
        					font-weight: 700;
        				}
        				span{
        					float: left;
        					width: 35%;
        					height: 7px;
        					border-bottom: 1px solid rgba(255,255,255,0.4);
        				}
        			}
        			.detail-infor{
        				.icon{
                 		vertical-align: top;
                 		display: inline-block;
                 		width: 12px;
                 		height: 12px;
                 		margin-right: 6px;
                 		background-size:12px 12px;
                 		background-repeat:no-repeat;
                 		
	                 	}
	                    .decrease{
	                        @include bg-image('decrease_1');
	                    }
	                    .discount{
	                        @include bg-image('discount_1');
	                    }
	                    .guarantee{
	                        @include bg-image('guarantee_1');
	                    }
	                    .invoice{
	                        @include bg-image('invoice_1');
	                    }
	                    .special{
	                        @include bg-image('special_1');
	                    }
	                    .list-infor{
	                    	height: 16px;
	                    	font-size: 12px;
	                    	line-height: 12px;
	                    	font-weight: 200;
	                    	color: rgb(255,255,255);
	                    	padding-left: 12px;
	                    }
        			}
        		}
        		.seller-notice{
        			padding: 0px 12px;
        			font-size: 12px;
        			line-height: 24px;
        			font-weight: 200;
        		}
        	}
        	.detail-close{
        		position: relative;
        		width: 32px;
        		height: 32px;
        		margin: -64px auto 0 auto;
        		clear: both;
        		font-size: 32px;
        	}
        }
    }        
 </style>